<template>
<!--  :class="{'text-black':!$q.dark.isActive,'text-white':$q.dark.isActive}"-->
  <q-page padding   >
    <!-- content -->
    <div
      class="dark:tw-text-white"
      style="width:60%;margin: auto;height: 80vh;overflow: auto"
    >
      <q-timeline>
        <q-timeline-entry heading>
          Random notes
        </q-timeline-entry>
        <q-timeline-entry v-for="(item,idx) in data" :key="idx" :subtitle="item['time']">
          <div>
            {{item['content']}}
          </div>
        </q-timeline-entry>
      </q-timeline>
    </div>

  </q-page>
</template>

<script>
import { api } from "boot/api";
import { ref, watch } from "vue";
import { useQuasar } from "quasar";

export default {
  // name: 'PageName',
  setup(){
    let data =ref([])
    const $q = useQuasar();
    api.get('/notes').then(res=>{
      if(res.status!==200){
        return
      }
      data.value = res.data
    })
    function activateDark() {
      console.log('dark');
    }
    window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",   e => e.matches && activateDark() );


    return {
      data,
      $q
    }
  }
}
</script>
<style scoped>



</style>
